<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .page {
            width: 500px;
            height: 40px;
        }

        .page button {
            float: left;
            margin-left: 5px;
            width: 80px;
            height: 40px;
        }

        .page .content {
            float: left;
        }

        .page .content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-left: 5px;
            background-color: black;
            color: burlywood;
        }

        .page .content .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="page">

    </div>
</body>
<script>
    function  Page(option){//option表示参数  参数是一个对象
        this.ele = document.querySelector(option.el);//找到目标元素
        this.ele.className = "page";
        this.create();//创造
    }


    Page.prototype.create = function(){// 

        this.prevBtn = document.createElement("button");
        this.prevBtn.innerHTML ="上一页";
        this.ele.appendChild(this.prevBtn);

        this.content = document.createElement("div");
        this.content.className="content";
        this.ele.appendChild(this.content); 


        this.nextBtn = document.createElement("button");
        this.nextBtn.innerHTML ="下一页";
        this.ele.appendChild(this.nextBtn);


    }





    new  Page({
        el:"#page",
       
    })


</script>

</html>